<template>
    <div class="file-upload-container">
        <ul class="file-upload-wrapper" @click="onclick">
            <li class="file-title">
                <p class="title">{{name}}</p>
                <p>{{title}}</p>
            </li>
            <li class="upload" v-show="showUpload" @click.stop="onupload">
                <div class="file">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="38" height="38" style="fill: rgba(69, 69, 72, 1);">
                        <path d="M16.552 6.667h11.448c0.736 0 1.333 0.597 1.333 1.333v0 18.667c0 0.736-0.597 1.333-1.333 1.333v0h-24c-0.736 0-1.333-0.597-1.333-1.333v0-21.333c0-0.736 0.597-1.333 1.333-1.333v0h9.885l2.667 2.667zM17.333 17.333h4l-5.333-5.333-5.333 5.333h4v5.333h2.667v-5.333z"></path>
                    </svg>
                    <span class="text">上传文件</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            name: {
                type: String,
                default: '个人文件区'
            },
            title: {
                type: String,
                default: '本区域用于存放用户的个人文件'
            },
            showUpload: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onupload () {this.$emit('onupload') },
            onclick () { this.$emit('onclick') }
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
   .file-upload-container {
       width: 100%;
       .file-upload-wrapper {
           display: flex;
           align-items: center;
           justify-content: space-between;
           height: 156px;
           padding: 0 50px;
           border-radius: 20px;
           border: 1px solid $border-color;
           box-sizing: border-box;
           box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
           transition: all 250ms;
           &:hover {
               opacity: .95;
               transform: translateY(7px);
               box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
           }
           .file-title {
               color: $color-font;
               line-height: 27px;
               font-size: 18px;
               .title {
                   margin-bottom: 7px;
                   font-weight: 600;
                   line-height: 53px;
                   font-size: 36px
               }
           }
           .upload {
               position: relative;
               width: 172px;
               height: 74px;
               line-height: 20px;
               border-radius: 4px;
               border: 1px solid rgb(229, 229, 234);
               .file {
                   position: absolute;
                   top: 0;
                   right: 0;
                   left: 0;
                   bottom: 0;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   cursor: pointer;
                   &:hover {
                       opacity: 0.8;
                       .text {
                           color: #0099ff;
                       }
                   }
                   &:active {
                       transform: scale(0.95);
                       border-color: #0099ff;
                   }
                   .text {
                       margin-left: 20px;
                       line-height: 19px;
                       color: rgb(69, 69, 72);
                       font-size: 14px;
                   }
               }

           }
       }
       .pupop-wrapper {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           .pupop {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
           }
       }
   }
</style>
